<template>
    <div class="mv">
       <div class="mv-inner">
          <ul class="mv-type">
            <li>
               <div class="title">区域</div>
               <ul class="mv-type-detail">
                  <li :class="{select:current.area===type.id}" @click="chooseArea(type.id,type.name)"  v-for="(type,index) in tags.area">{{type.name}}</li>
               </ul>
            </li>
            <li>
              <div class="title">版本</div>
              <ul class="mv-type-detail">
                <li :class="{select:current.version===type.id}" @click="chooseVersion(type.id,type.name)"  v-for="(type,index) in tags.version">{{type.name}}</li>
              </ul>
            </li>
          </ul>
          <div class="mv-type-title clearfix">
           <div class="left">
             <span class="all-list" v-if="current.area===15&&current.version===7">全部MV</span>
             <span class="other-list" v-else>
                <span v-show="current.area!==15">{{areaName}}
                   <span class="iconfont icon-cuowu" @click="withdraw(true)"></span>
                </span>
                <span v-show="current.version!==7">{{versionName}}
                   <span class="iconfont icon-cuowu" @click="withdraw(false)"></span>
                </span>
              </span>
           </div>
           <ul class="right">
             <li :class="{select:current.order===item.id}" @click="chooseOrder(item.id)" v-for="(item,index) in sorts" :key="index">{{item.name}}</li>
           </ul>
         </div>
          <ul class="mv-list">
            <li  v-for="(page,index) in mvList" :key="index">
                <div class="info_img" @click="toMvdetail(page.mv_mid)">
                  <img :src="page.mv_pic" alt="">
                  <div class="icon">
                    <span class="iconfont icon-bofang1"></span>
                  </div>
                </div>
                <div class="info_name ellipsis" @click="toMvdetail(page.mv_mid)">{{page.mv_name}}</div>
                <div class="info_singer ellipsis">{{page.singers}}</div>
                <div class="info_other">
                  <span class="iconfont icon-tuya-"></span>
                  <!--toFixed(num),表示保留num位小数-->
                  <span>{{page.play_num>10000?((page.play_num/10000).toFixed(1)+'万'):page.play_num}}</span>
                  <span>{{page.pub_date}}</span>
                </div>
            </li>
          </ul>
         <Pagination :size="20" :total="total" :page="current.page" @currentChange="currentChange"></Pagination>
       </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import Pagination from '@/components/Pagination/Pagination'
    let that={}
    export default {
        name: "MV",
        data(){
          return{
            mvList:[],
            tags:{
              area:[],
              version:[],
            },
            areaName:'',
            versionName:'',
            sorts:[
              {id:0,name:'最热'},
              {id:1,name:'最新'}
            ],
            current:{
              area:15,
              version:7,
              page:1,
              order:0,
            },
            total:0,
          }
        },
        methods:{
          chooseArea(id,name){
            this.current.page=1;
            this.current.area=id;
            if(name!=='全部'){
              this.areaName=name;
            }
          },
          chooseVersion(id,name){
            this.current.page=1;
            this.current.version=id;
            if(name!=='全部'){
              this.versionName=name;
            }
          },
          chooseOrder(id){
            this.current.page=1;
            this.current.order=id;
          },
          withdraw(bool){
            this.current.page=1;
            if(bool===true){
                  this.current.area=15
              }else{
                  this.current.version=7
              }
          },
          currentChange(value){
            // console.log(value);
            this.current.page=value;
          },
          toMvdetail(mid){
            this.$router.replace('/mvDetail/'+mid)
          }
        },
        computed:{
          ...mapState(['MV'])
        },
        mounted(){
          that=this;
          this.$store.dispatch('getMVDetail',{area_id:15,version_id:7,order:0,start:0,size:20})
        },
        watch:{
          MV(value){
            this.tags.area=value.mv_tags.area;
            this.tags.version=value.mv_tags.version;
            this.mvList=value.mv_list;
            this.total=value.total;
          },
          current:{
            handler:(value)=>{
              // console.log(value);
              that.$store.dispatch('getMVDetail',{area_id:value.area,version_id:value.version,order:value.order,start:(value.page-1)*20,size:20})
            },
            deep:true
          },
        },
        components:{
          Pagination
        }
    }
</script>

<style scoped lang="less">
.mv{
  background:linear-gradient(to bottom,#f2f2f2,#fafafa);
  .mv-inner{
    width: 1200px;
    margin: 0 auto;
    .mv-type{
      padding: 30px 0px;
      font-size: 14px;
      >li{
        display: flex;
        flex-direction: row;
        margin-bottom: 15px;
        .title{
            margin-right: 20px;
            padding: 10px;
        }
        .mv-type-detail{
          display: flex;
          flex-direction: row;
          >li{
            margin-right: 15px;
            padding: 10px;
            &:hover{
              color: #31c27c;
              cursor: pointer;
            }
            &.select{
              background: #31c27c;
              color: white;
            }
          }
        }
      }
    }
    .mv-type-title{
      width: 1200px;
      margin:0px auto 15px;
      height: 40px;
      line-height: 40px;
      .left{
        float: left;
        .all-list{
          font-size: 25px;
        }
        .other-list{
          >span{
            font-size: 14px;
            border: 1px solid #ccc;
            padding: 10px;
            &:hover{
              background-color: #31c27c;
              color: white;
            }
          }

        }

      }
      .right{
        font-size: 14px;
        border: 1px solid #ccc;
        float: right;
        display: flex;
        flex-direction: row;
        >li{
          flex: 1;
          padding:0px 10px;
          &.select{
            background-color: #31c27c;
            color: white;
          }
        }
      }
    }
    .mv-list{
      font-size: 14px;
      >li{
          display: inline-block;
          width: 285px;
          margin-right: 20px;
          position: relative;
          text-align: left;
          margin-bottom: 5px;
          &:nth-child(4n){
            margin-right: 0px;
          }
          .info_img{
            overflow: hidden;
            &:hover{
              &:after{
                content: '';
                display: block;
                width:285px;
                height: 162px;
                position: absolute;
                top:0;
                left: 0;
                background: rgba(0,0,0,.3);
                z-index: 1;
              }
              >img{
                transform: scale(1.1);
                transition: 0.4s;
              }
              .icon{
                opacity: 1;
                transform: scale(1.1);
              }
            }
            img{
              width: 285px;
            }
            .icon{
              position: absolute;
              z-index: 1;
              top: 60px;
              left: 122px;
              background: white;
              border-radius: 50%;
              height:40px;width: 40px;
              text-align: center;
              line-height: 40px;
              opacity: 0;
              transition: all 1s;
              .icon-bofang1{
                font-size: 20px;
                display: inline-block;
                margin-left: 4px;
                margin-top: 3px;
              }
            }
          }
          .info_name{
            margin-top: 18px;
            &:hover{
              cursor: pointer;
              color: #31c27c;
            }
          }
          .info_singer{
            color: #999;
            margin: 10px 0;
            >span{
              &:hover{
                cursor: pointer;
                color: #31c27c;
              }
            }
          }
          .info_other{
            color: #999;
            margin-bottom: 5px;
            .icon-weibiaoti1{
              font-size: 20px;
              vertical-align: -2px;
            }
            >span{
              &:last-child{
                margin-left: 10px;
              }
            }
        }
      }
    }
  }
}
</style>
